var QQMapWX = require('../../JavaScriptSDK/qqmap-wx-jssdk');
var qqmapsdk;
const allMarkers = [{
	id: 1,
	latitude: 18.785234,
	longitude: 110.389183,
	iconPath: "../../icons/location.png",
	width: 50,
	height: 50,
	joinCluster: true,
	label: {
		content: '泰國果園',
		color: '#00AA00',
		textAlign: "center",
		fontSize: 15
	},
	customCallout: {
		anchorY: 0,
		anchorX: 0,
		display: 'BYCLICK',
	},
	Mdata: {
		title: "泰国果园",
		introduce: "泰国果园。该园占地 20 hm2 ，设有春棚甜樱桃栽培区、秋棚柑橘栽培区、 夏冬棚葡萄栽培区及草莓栽培区。该园结合东海县 的地理、人文、交通、市场等优势，营造了集四季 水果、户外婚礼圣地、生态餐厅、亲子乐园、休闲 娱乐、商业会务于一体的圈层创意体验农场。该园 可同时容纳 600 多人进行采摘，篝火晚会、小型聚会也逐步成为农场的市场发展方向。"
	}
}, {
	id: 2,
	latitude: 18.796234,
	longitude: 110.389183,
	iconPath: "../../icons/location.png",
	width: 50,
	height: 50,
	joinCluster: true,
	label: {
		content: '小莓莓果園',
		color: '#00AA00',
		textAlign: "center",
		fontSize: 15
	},
	customCallout: {
		anchorY: 0,
		anchorX: 0,
		display: 'BYCLICK',
	},
	Mdata: {
		title: "小莓莓果园",
		introduce: "小莓莓果園有着千亩生态有机草莓园。该园位 于宿迁市宿豫区，是以草莓种苗培育、生产加工、 技术培训、休闲采摘为一体的融合型生态园。该园的草莓优质高产，不打农药，只用有机肥，通过蜜蜂自然授粉，深受消费者喜爱。除了采摘草莓以外， 在草莓基地旁还有台湾草莓文创馆，游客可进行新鲜草莓 DIY，还可以购买草莓系列玩具。基地内还 有各项游乐设施、美食餐馆，能满足游客的个性化 需求。截至 2019 年底，新庄镇有 23 户低收入农户 参与直接经营，人均年增收超过 2.5 万元。"
	}
}, {
	id: 3,
	latitude: 18.777234,
	longitude: 110.389183,
	iconPath: "../../icons/location.png",
	width: 50,
	height: 50,
	joinCluster: true,
	label: {
		content: '瑞華果園',
		color: '#00AA00',
		textAlign: "center",
		fontSize: 15
	},
	customCallout: {
		anchorY: 0,
		anchorX: 0,
		display: 'BYCLICK',
	},
	Mdata: {
		title: "瑞华果园",
		introduce: "瑞華园位于广州市从化区良口镇新温泉区的良平岭头村，占地面积近800亩。从化世外萄园是广东唯一以葡萄文化为主体的旅游景区，以萄园、农趣、休闲娱乐为载体，匠心独运，精耕细作，潜心构筑出主席仰台、百瓜满地、亲水河道、儿童乐园、缘木求鱼、星光长廊、手吻萄玉等特色景点，倾力打造成为珠三角最精致最具体验性的葡萄文化主题休闲旅游园区。在世外萄园可以假装在内蒙，有蒙古包住宿、烤全羊、蒙古风情表演。还有各种水果温泉泡池，以及红宝石、南玉、维多利亚、夏黑、美人指等30多种葡萄，是个度假胜地。"
	}
}, {
	id: 4,
	latitude: 18.794134,
	longitude: 110.389183,
	iconPath: "../../icons/location.png",
	width: 50,
	height: 50,
	joinCluster: true,
	label: {
		content: '金牛果園',
		color: '#00AA00',
		textAlign: "center",
		fontSize: 15
	},
	customCallout: {
		anchorY: 0,
		anchorX: 0,
		display: 'BYCLICK',
	},
	Mdata: {
		title: "金牛果园",
		introduce: "现代人生活节奏的加快，越来越向往有一个安静、祥和的生活环境。都市化的发展，使人们厌倦城市的喧器，回归大自然，已成为当今人们休闲度假的目标。金牛果园的推出正是适应人们的这种需求。迎合了都市人浮躁的心态，满足了都市人精神的需求。人们可以在农庄内垂钓、摘果、种田、喂鸡、养鱼等，享受无穷的田园乐趣，度过宁静的田园生活"
	}
}, {
	id: 5,
	latitude: 18.79532,
	longitude: 110.38075,
	iconPath: "../../icons/location.png",
	width: 50,
	height: 50,
	joinCluster: true,
	label: {
		content: '青梅果園',
		color: '#00AA00',
		textAlign: "center",
		fontSize: 15
	},
	customCallout: {
		anchorY: 0,
		anchorX: 0,
		display: 'BYCLICK',
	},
	Mdata: {
		title: "青梅果园",
		introduce: "青梅果园。 该果园创建于 2007 年，目前，共有葡萄园 14 hm2 、 梨园 2 hm2 。园内拥有 2 个养殖场和 1 个鱼塘，鱼 塘占地面积 1.3 hm2 。近年来，该园不断加强基础设施建设，将特色农业与休闲农业相结合，并优化各 项休闲娱乐服务，每年为游客提供采摘、垂钓、美食等各类休闲体验服务１万多人次。游客可自主采摘新鲜水果、捕捉鲜活家禽，享受田园生活，还能 感受自然风光。另外还实现了带动周边100 多名农 户就业，农户平均年增收 15 000 元左右。"
	}
}]


Page({
	data: {
		latitude: "",
		longitude: "",
		markers: [],
		customCalloutMarkerIds: [],
		num: 1,
		showModalStatus: false,
		marker:{},
		polyline:null,
		distance:Number,//距离
		steps:[]
	},
	onReady: function (e) {
		this.mapCtx = wx.createMapContext('myMap')
	},

	onLoad: function () {
		this.addMarker()
		wx.getLocation({ //获取用户地址
			type: 'gcj02',
			success: res => {
				const latitude = res.latitude
				const longitude = res.longitude
				console.log(res);
				this.setData({
					latitude,
					longitude
				})
			}
		})

		qqmapsdk = new QQMapWX({ //实例化腾讯地图
			key: 'S2NBZ-4COLU-JKMVT-2V2BI-NEDDQ-GQBKU'
		});

		this.mapCtx = wx.createMapContext('mapId') //获取map实例

	},
	addMarker() {
		const markers = allMarkers

		// const marker = {
		//   width: 50,
		//   height: 50,
		//   joinCluster: true, // 指定了该参数才会参与聚合
		//   iconPath: "../../icons/location.png",
		//   customCallout:{
		//     anchorY: 0,
		//     anchorX: 0,
		//     display: 'ALWAYS',
		//   }
		// }
		// const positions = [
		//   {
		//     id:1,
		//     latitude: 18.785234,
		//     longitude: 110.389183,
		//     label:{
		//       content:'泰國果園',
		//       color:'#00AA00',
		//       textAlign:"center",
		//       fontSize:15
		//     },
		//     Mdata:{
		//       title:"泰国果园",
		//       introduce:'泰国果园。该园占地 20 hm2 ，设有春棚甜樱桃栽培区、秋棚柑橘栽培区、 夏冬棚葡萄栽培区及草莓栽培区。该园结合东海县 的地理、人文、交通、市场等优势，营造了集四季 水果、户外婚礼圣地、生态餐厅、亲子乐园、休闲 娱乐、商业会务于一体的圈层创意体验农场。该园 可同时容纳 600 多人进行采摘，篝火晚会、小型聚会也逐步成为农场的市场发展方向。',
		//     }
		//   }, {
		//     id:2,
		//     latitude: 18.796234,
		//     longitude: 110.389183,
		//     label:{
		//       content:'小莓莓果園',
		//       color:'#00AA00',
		//       textAlign:"center",
		//       fontSize:15
		//     },
		//     Mdata:{
		//       title:"小莓莓果园",
		//       introduce:'小莓莓果園有着千亩生态有机草莓园。该园位 于宿迁市宿豫区，是以草莓种苗培育、生产加工、 技术培训、休闲采摘为一体的融合型生态园。该园的草莓优质高产，不打农药，只用有机肥，通过蜜蜂自然授粉，深受消费者喜爱。除了采摘草莓以外， 在草莓基地旁还有台湾草莓文创馆，游客可进行新鲜草莓 DIY，还可以购买草莓系列玩具。基地内还 有各项游乐设施、美食餐馆，能满足游客的个性化 需求。截至 2019 年底，新庄镇有 23 户低收入农户 参与直接经营，人均年增收超过 2.5 万元。',
		//     }
		//   }, {
		//     id:3,
		//     latitude: 18.777234,
		//     longitude: 110.389183,
		//     label:{
		//       content:'瑞華果園',
		//       color:'#00AA00',
		//       textAlign:"center",
		//       fontSize:15
		//     },
		//     Mdata:{
		//       title:"瑞华果园",
		//       introduce:'瑞華园位于广州市从化区良口镇新温泉区的良平岭头村，占地面积近800亩。从化世外萄园是广东唯一以葡萄文化为主体的旅游景区，以萄园、农趣、休闲娱乐为载体，匠心独运，精耕细作，潜心构筑出主席仰台、百瓜满地、亲水河道、儿童乐园、缘木求鱼、星光长廊、手吻萄玉等特色景点，倾力打造成为珠三角最精致最具体验性的葡萄文化主题休闲旅游园区。在世外萄园可以假装在内蒙，有蒙古包住宿、烤全羊、蒙古风情表演。还有各种水果温泉泡池，以及红宝石、南玉、维多利亚、夏黑、美人指等30多种葡萄，是个度假胜地。',
		//     }
		//   }, {
		//     id:4,
		//     latitude: 18.794134,
		//     longitude: 110.389183,
		//     label:{
		//       content:'金牛果園',
		//       color:'#00AA00',
		//       textAlign:"center",
		//       fontSize:15
		//     },
		//     Mdata:{
		//       title:"金牛果园",
		//       introduce:'现代人生活节奏的加快，越来越向往有一个安静、祥和的生活环境。都市化的发展，使人们厌倦城市的喧器，回归大自然，已成为当今人们休闲度假的目标。金牛果园的推出正是适应人们的这种需求。迎合了都市人浮躁的心态，满足了都市人精神的需求。人们可以在农庄内垂钓、摘果、种田、喂鸡、养鱼等，享受无穷的田园乐趣，度过宁静的田园生活',
		//     }
		//   },
		//   {
		//     id:5,
		//     latitude: 18.79532,
		//     longitude: 110.38075,
		//     label:{
		//       content:'青梅果園',
		//       color:'#00AA00',
		//       textAlign:"center",
		//       fontSize:15
		//     },
		//     Mdata:{
		//       title:"青梅",
		//       introduce:'青梅农园。 该农园创建于 2007 年，目前，共有葡萄园 14 hm2 、 梨园 2 hm2 。园内拥有 2 个养殖场和 1 个鱼塘，鱼 塘占地面积 1.3 hm2 。近年来，该园不断加强基础设施建设，将特色农业与休闲农业相结合，并优化各 项休闲娱乐服务，每年为游客提供采摘、垂钓、美食等各类休闲体验服务１万多人次。游客可自主采摘新鲜水果、捕捉鲜活家禽，享受田园生活，还能 感受自然风光。另外还实现了带动周边100 多名农 户就业，农户平均年增收 15 000 元左右。',
		//     }
		//   }
		// ]

		// const markers = []
		// console.log(marker);
		// positions.forEach((p, i) => {
		//   const newMarker = Object.assign(marker, p)
		// 	console.log(newMarker);
		//   markers.push(newMarker)
		// 	console.log(markers);
		// })

		const customCalloutMarkerIds = [1, 2, 3, 4, 5]
		this.setData({
			markers,
			customCalloutMarkerIds
		})

	},

	callouttap(e) { //点击气泡触发事件
		console.log(e.detail.markerId);
		let markerId = e.detail.markerId
		let index=allMarkers.findIndex(v=>v.id==markerId)
		let marker=allMarkers[index]
		this.setData({
			showModalStatus:true,
			marker
		})

	},




	formSubmit(e) { //腾讯导航API
		var _this = this;
		//调用距离计算接口
		let from = this.data.latitude+','+ this.data.longitude
		let to = this.data.marker.latitude+','+ this.data.marker.longitude
		console.log(from,to);
		qqmapsdk.direction({
			mode: 'driving', //可选值：'driving'（驾车）、'walking'（步行）、'bicycling'（骑行），不填默认：'driving',可不填
			//from参数不填默认当前地址
			from:from,
			to: to,
			success: function (res) {
				console.log(res);
				var ret = res;
				var coors = ret.result.routes[0].polyline
				var distance=res.result.routes[0].distance/1000//总距离
				var steps1=res.result.routes[0].steps//路线方案
				var steps=steps1.map((v,i) => {
					return v.instruction
				}).map(v=>v.split(','));
				var	pl = [];
				//坐标解压（返回的点串坐标，通过前向差分进行压缩）
				var kr = 1000000;
				for (var i = 2; i < coors.length; i++) {
					coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
				}
				//将解压后的坐标放入点串数组pl中
				for (var i = 0; i < coors.length; i += 2) {
					pl.push({ latitude: coors[i], longitude: coors[i + 1] })
				}
				console.log(pl)
				//设置polyline属性，将路线显示出来,将解压坐标第一个数据作为起点
				_this.setData({
					distance,
					steps,
					latitude: pl[0].latitude,
					longitude: pl[0].longitude,
					polyline: [{
						points: pl,
						color: '#FF0000DD',
						width: 4
					}]
				})
			},
			fail: function (error) {
				console.error(error);
			},
			complete: function (res) {
				console.log(res);
			}
		});

		this.setData({
			showModalStatus:false
		})

		wx.pageScrollTo({
			selector:"#sy1"
		})
		
	},


	sy1(){
		console.log(2);
		const query = wx.createSelectorQuery()
    query.select('#sy1').boundingClientRect()
    query.selectViewport().scrollOffset()
    query.exec(function(res){
      res[0].top       // #the-id节点的上边界坐标
      res[1].scrollTop // 显示区域的竖直滚动位置
			console.log(res);
    })
	},




	powerDrawer: function (e) {
		console.log(e);
		var currentStatu = e.currentTarget.dataset.statu;
		this.util(currentStatu)
	},
	util: function (currentStatu) { /* 动画部分 */
		// 第1步：创建动画实例 
		var animation = wx.createAnimation({
			duration: 200,
			//动画时长 
			timingFunction: "linear",
			//线性 
			delay: 0
			//0则不延迟 
		});
		// 第2步：这个动画实例赋给当前的动画实例
		this.animation = animation;
		// 第3步：执行第一组动画
		animation.opacity(0).rotateX(-100).step();
		// 第4步：导出动画对象赋给数据对象储存 
		this.setData({ animationData: animation.export() })
		// 第5步：设置定时器到指定时候后，执行第二组动画 
		setTimeout(function () {
			// 执行第二组动画 
			animation.opacity(1).rotateX(0).step();
			// 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象 
			this.setData({ animationData: animation })
			//关闭 
			if (currentStatu == "close") {
				this.setData({
					showModalStatus: false
				})
			}
		}.bind(this), 200)
		// 显示 
		if (currentStatu == "open") {
			this.setData({
				showModalStatus: true
			});
		}
	}
})